<template>
  <div class="dplist">
    <van-grid :border="false" :column-num="1">
      <van-grid-item style="background:#e2e2e2;padding: 0px 2px 2px;" v-for="(item,index) of list" :key="index">
        <div id="sum">
        <div class="header">
          <div class="header-img">
            <van-image
            round
            width="2rem"
            height="1.9rem"
            :src="headImg"
            />
          </div>
          <div class="p">
            <p class="p1">{{item.shopName}}</p>
            <!--<p class="p2">{{item.dpbq}}</p>-->
          </div>
          <div class="button">
            <div @click="goShop(item.shopId,item.shopName)">
              <van-button round type="info">进店</van-button>
            </div>
          </div>
        </div>
        <div class="dpImg">
          <van-image :src="IMG_SERVICE_ADDR + item.shopUrl" style="width: 100%;" />
        </div>
        <div class="bottom">
           <p style="overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;text-align: left;">
           {{item.shopBrief}}
           </p>
           <div class="bottom-address">
             <van-icon name="location-o" />{{item.shopAddr}}
           </div>
        </div>
        </div>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import https from '@/common/https.js'
import {IMG_SERVICE_ADDR} from '@/config/configConstant.js' // 常量参数
import headImg from '@/assets/img/shop.png'
export default {
  name: 'shopdp',
  data () {
    return {
      IMG_SERVICE_ADDR: IMG_SERVICE_ADDR,
      headImg: headImg,
      list: [{
        // shopId: '01',
        // shopName: '天猫官方旗舰店',
        // // dpbq: '官方授权||七天无理由退货',
        // shopAddr: '深圳市龙岗连岳大道',
        // shopBrief: '跨越百年历程，斯文一脉相承。省实前身始于1872年清政府设立的“留美幼童英语先修班”，距今已有 140多 年。历代省实人秉承“爱国、团结、求实、创新”的校训及“以人为本，以德树人，以质立校”的办学理念，形成了“实验性，创新性，示范性”的办学特色，培养了包括邓锡铭、黄耀祥、范海福、蔡睿贤、姜伯驹、岑可法、钟南山等院士在内的万千优秀学子。目前学校形成了“一校九区”的发展格局：初中校区位于广州市中山四路，高中校区位于广州市荔湾区龙溪大道，天河分校位于广州市天河区天源路，顺德分校位于佛山市顺德区容桂小黄圃，南海分校位于佛山市南海里水中信大道中信山语湖，珠海金湾学校位于珠海市金湾区，荔湾省实位于荔湾区广钢地块，白云省实位于广州市白云区夏花一路，省实越秀学校位于广州市越秀区（由原越秀区外国语学校和21中合并而成）。',
        // shopUrl: '//upload//jmxf//imgFile//1578307516573.jpg'
      }]
    }
  },
  created () { // created和mounted里面都可以做数据处理，唯一不同的是created dom未完成挂载(一般数据加载)，mounted已经完成了挂载(业务逻辑处理)。
    this.getShopList()
  },
  methods: {
    getShopList () { // 获取店铺列表
      let params = {}
      https.fetchPost('/shop/webs/findShopList', params).then((data) => {
        let shopList = data.data
        if (shopList !== null) {
          this.list = shopList
        }
      }).catch(err => {
        console.log(err)
      })
    },
    goShop (shopId, shopName) { // 进入店铺
      this.$router.push({
        path: '/school',
        query: {
          shopId: shopId,
          shopName: shopName
        }
      })
    }
  }
}
</script>

<style scoped>
  body{
    padding-bottom: 42px;
  }
  .header{
    overflow: hidden;
    height: 2rem;
    line-height: 2rem;
  }
  .header-img {
    position: relative;
    overflow: hidden;
  }
  .p {
    position: absolute;
    margin-left: 2rem;
    text-align: -webkit-left;
  }
  .p1 {
    position: relative;
    top: -45px;
    margin-left: 2px;
    font-size: .85rem;
  }
  .button {
    position: relative;
    top: -33px;
    height: 1.5rem;
    font-size: .7rem;
    text-align: -webkit-right;
  }
  .van-button--info {
    color: #fff;
    background-color: #f95500;
    border: 1px solid #ff4000;
}
.van-button--normal {
    padding: 0 15px;
}
.van-button {
  height: 1.5rem;
  line-height: 1.5rem;
}
  /*.img {
    margin-top: 1rem;
    overflow: hidden;
  }*/
  .van-image {
    width: 33.33%;
    float: left;
  }
  .bottom{
    width: 100%;
    height: 4rem;
    overflow: hidden;
    font-size: .6rem;
    /* position: relative; */
    /* bottom: 0rem; */
    /* top: 0rem; */
    margin: 0;
    padding: 0;
  }
  .bottom-address{
    float:left;
    color:#f95500;
    position: relative;
    top: -8px;
    font-size: .9rem;
  }
</style>
